<template>
  <div>
    <div class="center">
      <h3>批量上传教师</h3>
      <input type="file" ref="myfile" @change="selectFile"/>
      <input type="button" value="点击文件上传" @click="upload"/>
    </div>
    <div>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="用户管理" name="first">
          <el-input class="center" v-model="input1" placeholder="请输入内容">
            <template slot="append">
              <el-button type="primary" icon="el-icon-search" @click="searchTeacher()">搜索</el-button>
            </template>
          </el-input>
          <div class="center">
            <el-table
                :data="teacherList"
                style="width: 100%"
            >
              <el-table-column
                  prop="id"
                  label="id"
                  width="160">
              </el-table-column>
              <el-table-column
                  prop="uid"
                  label="账号"
                  width="160">
              </el-table-column>
              <el-table-column
                  prop="name"
                  label="姓名"
                  width="160">
              </el-table-column>
              <el-table-column
                  prop="password"
                  label="密码"
                  width="160">
              </el-table-column>
              <el-table-column
                  prop="level"
                  label="等级"
                  width="160">
              </el-table-column>
              <el-table-column
                  fixed="right"
                  label="操作"
                  width="160">
                <template slot-scope="scope">
                  <el-button
                      @click.native.prevent="deleteTeacher(scope.$index, scope.row)"
                      type="text"
                      size="small">
                    移除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
        <el-tab-pane label="资源管理" name="two">
          <el-input class="center" v-model="input2" placeholder="请输入内容">
            <template slot="append">
              <el-button type="primary" icon="el-icon-search" @click="searchResource()">搜索</el-button>
            </template>
          </el-input>
          <div class="center">
            <el-table
                :data="resourceList"
                style="width: 100%"
            >
              <el-table-column
                  prop="id"
                  label="id"
                  width="160">
              </el-table-column>
              <el-table-column
                  prop="type"
                  label="类型"
                  width="160">
              </el-table-column>
              <el-table-column
                  prop="name"
                  label="名称"
                  width="160">
              </el-table-column>
              <el-table-column
                  prop="createTime"
                  label="发布时间"
                  width="160">
              </el-table-column>
              <el-table-column
                  prop="title"
                  label="title"
                  width="160">
              </el-table-column>
              <el-table-column
                  fixed="right"
                  label="操作"
                  width="160">
                <template slot-scope="scope">
                  <el-button
                      @click.native.prevent="deleteResource(scope.$index, scope.row)"
                      type="text"
                      size="small">
                    移除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
        <el-tab-pane label="文章管理" name="three">
          <el-input class="center" v-model="input3" placeholder="请输入内容">
            <template slot="append">
              <el-button type="primary" icon="el-icon-search" @click="searchArticles()">搜索</el-button>
            </template>
          </el-input>
          <div class="center">
            <el-table
                :data="articlesList"
                style="width: 100%"
            >
              <el-table-column
                  prop="id"
                  label="id"
                  width="160">
              </el-table-column>
              <el-table-column
                  prop="title"
                  label="标题"
                  width="160">
              </el-table-column>
              <el-table-column
                  prop="createTime"
                  label="发布时间"
                  width="160">
              </el-table-column>
              <el-table-column
                  prop="name"
                  label="发布人"
                  width="160">
              </el-table-column>
              <el-table-column
                  prop="userId"
                  label="用户id"
                  width="160">
              </el-table-column>
              <el-table-column
                  fixed="right"
                  label="操作"
                  width="160">
                <template slot-scope="scope">
                  <el-button
                      @click.native.prevent="deleteArticles(scope.$index, scope.row)"
                      type="text"
                      size="small">
                    移除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>


<script>
export default {

  name: "Mana",
  components: {
  },
  data() {
    return {
      teacherList: [],
      resourceList: [],
      articlesList: [],
      activeName: '',
      input1: '',
      input2: '',
      input3: ''
    }
  },
  methods: {
    searchTeacher() {
      this.getTeacehr();
    },
    searchResource() {
      this.getResource();
    },
    searchArticles() {
      this.getArticles();
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    deleteTeacher(index, row) {
      this.$axios.get("mana/delUser?id=" + row.id)
          .then(resp => {
            console.log("删除成功");
            this.teacherList.splice(index, 1);
            this.teacherList.sort();
          })
          .catch(error => {
            console.log(error)
          })
    },
    deleteResource(index, row) {
      this.$axios.get("mana/delResource?id=" + row.id + "&sType=" + row.type)
          .then(resp => {
            console.log("删除成功");
            this.resourceList.splice(index, 1);
            this.resourceList.sort();
          })
          .catch(error => {
            console.log(error)
          })
    },
    deleteArticles(index, row) {
      this.$axios.get("mana/delArticles?id=" + row.id)
          .then(resp => {
            console.log("删除成功");
            this.articlesList.splice(index, 1);
            this.articlesList.sort();
          })
          .catch(error => {
            console.log(error)
          })
    },
    // 选择文件
    selectFile() {
      // 得到文本框对象
      let wenbenkuang = this.$refs['myfile'];
      this.fileObj = wenbenkuang.files[0];
      console.log(this.fileObj);

    },
    upload() {
      console.log(this.fileObj);
      // 表单序列化
      let mydata = new FormData();
      mydata.append('file', this.fileObj);
      // 调用axios
      this.$axios.post('mana/upLoad', mydata, {
        headers: {'Content-Type': 'multipart/form-data'},//定义内容格式,很重要
        timeout: 20000,
      }).then(resp => {
        let res = resp.data;
        alert(res)
      }).catch(error => {
            console.log(error);
          })
    },
    getTeacehr() {
      this.$axios.get("mana/getUser?obj=" + this.input1)
          .then(resp => {
            let res = resp.data;
            this.teacherList = res.data;
          })
          .catch(error => {
            console.log(error)
          })
    },
    getResource() {
      this.$axios.get("mana/getResource?obj=" + this.input2)
          .then(resp => {
            let res = resp.data;
            console.log(res.data)
            this.resourceList = res.data;
          })
          .catch(error => {
            console.log(error)
          })
    },
    getArticles() {
      this.$axios.get("mana/getArticles?obj=" + this.input3)
          .then(resp => {
            let res = resp.data;
            console.log(res.data)
            this.articlesList = res.data;
          })
          .catch(error => {
            console.log(error)
          })
    }
  },
  created() {
    this.getTeacehr();
    this.getResource();
    this.getArticles();
  }
}
</script>

<style scoped>
.center {
  width: 80%;
  margin: 0 auto;
}
</style>